<template>
  <main>
    <ul class="menucategory" id="menucategory">
      <cate-item v-for="(item,index) in shopList" :class="{active: index===cateIndex}" :cate="item" :key="index" :data-index="index"></cate-item>
    </ul>
    <section class="goodsview-container" id="goodsview-container">
      <dl v-for="(item,index) in shopList" :id="'goodsview-item-'+index" :data-index="index" :key="index" >
        <dt>{{item.goClaName}}</dt>
        <dd v-for="fruitItem in item.claGoodsList" @click="link(fruitItem.goSn)">
          <div class="p-pic">
            <img class="mini-cover" v-lazy="'http://www.gogagoga.cc/picfile/'+fruitItem.goCover" width="100%" height="100%">
          </div>
          <section class="p-info">
            <h3>{{fruitItem.goName}}</h3>
            <p>{{fruitItem.goUnit}}</p>
            <div class="p-price">￥ {{fruitItem.goPrice}}</div>
          </section>
          <div class="p-control">
            <cart-contol :goods="fruitItem" :shop="shopId"></cart-contol>
          </div>
        </dd>
      </dl>
    </section>
  </main>
</template>

<script lang="babel">
  import Icon from '@components/icon'
  import { mapGetters } from 'vuex'
  import cateItem from './cateItem.vue'
  import cartContol from './cartControl.vue'
  export default {
    components: {
      Icon,
      cartContol,
      cateItem
    },
    data () {
      return {
        cateIndex: 0,
        scroll: true,
        shopId: ''
      }
    },
    computed: {
      ...mapGetters({
        shopList: 'backend/shop/getShopList'
      }),
      cateNum(cateId) {
        return cateId
      }
    },
    mounted() {
      let _this = this;
      this.shopId = this.$route.params.shopId
      this.$nextTick(function () {
        _this.initScroll();
      })
    },
    methods: {
      initScroll () {
        let addoffset = 1
        let _this = this;
        let $ = require('webpack-zepto');
        let goodsViewTop = $("#goodsview-container").offset().top;
        let goodsContainer = $('#goodsview-container')
        let scrollEvent = function () {
          $("#goodsview-container dl").each(function () {
            let top = $(this).offset().top;
            let height = $(this).height()
            if(top<=goodsViewTop && top > goodsViewTop-height){
              _this.cateIndex = $(this).data("index")
            }
          })
        };
        goodsContainer.on('scroll', scrollEvent);
        $('#menucategory').on('click','li',function () {
          let index = _this.cateIndex = $(this).data('index');
          goodsContainer.off('scroll', scrollEvent);
          let scrollTo = $("#goodsview-item-" + index);
          goodsContainer.scrollTop(scrollTo.offset().top - goodsContainer.offset().top + goodsContainer.scrollTop() - addoffset)
          setTimeout(function () {
            goodsContainer.on('scroll', scrollEvent);
          },10)

        })
      },
      link(goSn) {
        let shopId = this.shopId = this.$route.params.shopId;
        this.$router.push({name:'goods',params: {id:goSn},query:{shop: shopId}})
      }
    }
  }
</script>

